<template>
    <div class="wrapper">
        <!-- 报表标题组件-->
        <ReportTitle :titleInfo="titleInfo" :isExport="false" :isAdd="false" />
        <div class="dicMain">
            <ReportSearch ref="searchRef" :searchFormDatas="searchFormDatas" v-model:searchForm="searchForm"
                :isBtnShow="false" />
            <div class="dicFooter">
                <span class="resetBtn" @click="handleCancel">取消</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

import ReportTitle from '@/components/reportTitle/index.vue';
import ReportSearch from '@/components/reportSearch/index.vue';

const emit = defineEmits(['updateDictionaryInfo']);

const props = defineProps({
    dictionaryInfo: {
        type: Object,
        default: {}
    }
});

// 报表标题信息
const titleInfo = reactive({
    title: '字典项预览',
    description: ""
});

const searchRef = ref(null);

// 默认表单数据
const searchForm = reactive({
    dicName: '',
    dicValue: '',
    dicSort: ''
});

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 0,
        type: 'input',
        prop: 'dicName',
        label: '字典标签',
        disabled: true,
        placeholder: '请输入字典标签',
        rules: [{ required: true, message: '字典标签不能为空', trigger: ['blur'] }]
    }, {
        id: 1,
        type: 'input',
        prop: 'dicValue',
        label: '字典键值',
        disabled: true,
        placeholder: '请输入字典键值',
        rules: [{ required: true, message: '字典键值不能为空' }]
    },  {
        id: 2,
        type: 'input',
        prop: 'dicSort',
        label: '字典排序',
        disabled: true,
        placeholder: '请输入字典排序',
        rules: [{ required: true, message: '字典排序不能为空' }]
    }
]);

onMounted(() => { 
    initData();
});

// 初始化数据
const initData = () => {
    const { dictionaryInfo } = props;
    
    Object.keys(searchForm).forEach(key => {
        if(dictionaryInfo[key]){
            searchForm[key] = dictionaryInfo[key];
        }
    });
};

const handleCancel = () => {
    emit('updateDictionaryInfo', { type: 'list', dictionaryInfo: {} });
};

</script>